<script setup>
import { ref, onMounted } from 'vue';
import { UpdatePreferences } from "../../wailsjs/go/system/App.js";

const props = defineProps({
  preferences: {
    type: Object,
    default: () => ({
      theme: 'system',
      hotKey: 'alt+h',
      maxResults: 20,
      showInMenuBar: true,
      launchAtStartup: true,
      defaultBrowser: ''
    })
  }
});

const emit = defineEmits(['close', 'update:preferences']);

const localPreferences = ref({...props.preferences});

// 热键选项
const modifierKeys = [
  { label: 'Alt', value: 'alt' },
  { label: 'Ctrl', value: 'ctrl' },
  { label: 'Shift', value: 'shift' },
  { label: 'Command', value: 'cmd' }
];

const letterKeys = Array.from({ length: 26 }, (_, i) => ({
  label: String.fromCharCode(97 + i).toUpperCase(),
  value: String.fromCharCode(97 + i)
}));

// 主题选项
const themeOptions = [
  { label: '跟随系统', value: 'system' },
  { label: '浅色', value: 'light' },
  { label: '深色', value: 'dark' }
];

// 保存设置
const saveSettings = async () => {
  try {
    await UpdatePreferences(localPreferences.value);
    emit('update:preferences', localPreferences.value);
    emit('close');
  } catch (error) {
    console.error('保存设置失败:', error);
    // 显示错误提示
  }
};

// 取消设置
const cancelSettings = () => {
  localPreferences.value = {...props.preferences};
  emit('close');
};

// 解析热键字符串为对象
const parseHotKey = (hotkey) => {
  const parts = hotkey.split('+');
  return {
    modifier: parts[0] || 'alt',
    key: parts[1] || 'h'
  };
};

// 组合热键对象为字符串
const combineHotKey = () => {
  const hotkey = parseHotKey(localPreferences.value.hotKey);
  return `${hotkey.modifier}+${hotkey.key}`;
};

// 更新热键
const updateHotKey = (type, value) => {
  const hotkey = parseHotKey(localPreferences.value.hotKey);
  if (type === 'modifier') {
    hotkey.modifier = value;
  } else {
    hotkey.key = value;
  }
  localPreferences.value.hotKey = `${hotkey.modifier}+${hotkey.key}`;
};

onMounted(() => {
  // 可以在这里加载当前设置
});
</script>

<template>
  <div class="settings-panel">
    <div class="settings-header">
      <h2>设置</h2>
      <button class="close-button" @click="emit('close')">&times;</button>
    </div>
    
    <div class="settings-content">
      <!-- 基本设置 -->
      <div class="settings-section">
        <h3>基本设置</h3>
        
        <div class="setting-item">
          <label>主题</label>
          <a-select v-model:value="localPreferences.theme" style="width: 200px">
            <a-select-option v-for="option in themeOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </a-select-option>
          </a-select>
        </div>
        
        <div class="setting-item">
          <label>最大结果数</label>
          <a-input-number v-model:value="localPreferences.maxResults" :min="5" :max="50" />
        </div>
      </div>
      
      <!-- 热键设置 -->
      <div class="settings-section">
        <h3>热键设置</h3>
        
        <div class="setting-item">
          <label>激活热键</label>
          <div class="hotkey-selector">
            <a-select 
              :value="parseHotKey(localPreferences.hotKey).modifier" 
              style="width: 100px"
              @change="(value) => updateHotKey('modifier', value)"
            >
              <a-select-option v-for="key in modifierKeys" :key="key.value" :value="key.value">
                {{ key.label }}
              </a-select-option>
            </a-select>
            <span>+</span>
            <a-select 
              :value="parseHotKey(localPreferences.hotKey).key" 
              style="width: 100px"
              @change="(value) => updateHotKey('key', value)"
            >
              <a-select-option v-for="key in letterKeys" :key="key.value" :value="key.value">
                {{ key.label }}
              </a-select-option>
            </a-select>
          </div>
          <div class="hotkey-preview">
            当前热键: <kbd>{{ combineHotKey() }}</kbd>
          </div>
        </div>
      </div>
      
      <!-- 启动设置 -->
      <div class="settings-section">
        <h3>启动设置</h3>
        
        <div class="setting-item">
          <a-checkbox v-model:checked="localPreferences.showInMenuBar">在菜单栏显示图标</a-checkbox>
        </div>
        
        <div class="setting-item">
          <a-checkbox v-model:checked="localPreferences.launchAtStartup">开机自动启动</a-checkbox>
        </div>
      </div>
      
      <!-- 浏览器设置 -->
      <div class="settings-section">
        <h3>浏览器设置</h3>
        
        <div class="setting-item">
          <label>默认浏览器 (留空使用系统默认)</label>
          <a-input v-model:value="localPreferences.defaultBrowser" placeholder="例如: /Applications/Google Chrome.app" />
        </div>
      </div>
    </div>
    
    <div class="settings-footer">
      <a-button @click="cancelSettings">取消</a-button>
      <a-button type="primary" @click="saveSettings">保存</a-button>
    </div>
  </div>
</template>

<style scoped>
.settings-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.98);
  z-index: 100;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.settings-header h2 {
  margin: 0;
  font-size: 18px;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.close-button:hover {
  color: #333;
}

.settings-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.settings-section {
  margin-bottom: 24px;
}

.settings-section h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: #333;
}

.setting-item {
  margin-bottom: 16px;
}

.setting-item label {
  display: block;
  margin-bottom: 8px;
  color: #666;
}

.hotkey-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hotkey-preview {
  margin-top: 8px;
  color: #666;
}

.hotkey-preview kbd {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: monospace;
}

.settings-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>